<template>
  <div class="data">
    <div class="in">
      <el-table
        :data="tableData"
        :default-sort="{ prop: 'date', order: 'descending' }"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        max-height="500"
      >
        <el-table-column prop="dataName" label="数据名" sortable width="250">
        </el-table-column>
        <el-table-column prop="size" label="大小" sortable width="220">
        </el-table-column>
        <el-table-column prop="time" label="时间" sortable width="300">
        </el-table-column
        ><el-table-column label="操作">
          <template slot-scope="scope">
            <button>下载</button
            ><button @click="handleDelete(scope.$index, scope.row)">删除</button
            ><button @click="dialogVisible = true">建图</button>
          </template></el-table-column
        >
      </el-table>
      <el-dialog
        title="建图"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
        :fullscreen="isFullScreen"
      >
        <!-- 步骤条 -->
        <el-steps :active="activeStep" finish-status="success">
          <el-step title="创建地图"> </el-step>
          <el-step title="采集数据环境"></el-step>
          <el-step title="采集中"></el-step>
          <el-step title="地图构建"></el-step>
          <el-step title="地图构建完成"></el-step>
        </el-steps>
        <!-- tab栏 -->
        <el-tabs v-model="activeTab">
          <el-tab-pane label="创建地图" name="0">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="地图名" required>
                <el-input
                  v-model="form.mapName"
                  placeholder="请输入地图名"
                ></el-input>
              </el-form-item>
              <el-form-item label="采集人">
                <el-input
                  v-model="form.gatherName"
                  placeholder="请输入采集人"
                ></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  v-model="form.remark"
                  placeholder="请输入备注"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="采集数据环境" name="1">采集数据环境</el-tab-pane>
          <el-tab-pane label="采集中" name="2">采集中</el-tab-pane>
          <el-tab-pane label="地图构建" name="3">地图构建</el-tab-pane>
          <el-tab-pane label="地图构建完成" name="4">地图构建完成</el-tab-pane>
          <el-tab-pane label="已完成" name="5"
            ><el-card shadow="always"> 您已完成所有设置 </el-card></el-tab-pane
          >
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="back" :disabled="activeStep === 0"
            >上一步</el-button
          >
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="next" id="next">下一步</el-button>
        </span>
        <i
          class="iconfont icon-fangda2"
          @click="isFullScreen = !isFullScreen"
          v-if="!isFullScreen"
        ></i>
        <i
          class="iconfont icon-suoxiao"
          @click="isFullScreen = !isFullScreen"
          v-else
        ></i>
      </el-dialog>
      <div>
        <Pagination
          style="
            background: #494141;
            display: inline-block;
            width: 100%;
            padding: 20px 0;
          "
          :total="total"
          :pageSize="pageSize"
          :currentPage="currentPage"
          @changePage="changePage"
          @changePageSize="changePageSize"
        />
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from "../../components/Pagination.vue";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      tableData: [],
      pageSize: 5,
      total: 20,
      currentPage: 1,
      // list:[
      //   {
      //     dataName: "gac eight floor02",
      //     size: "4G",
      //     time: "2024-05-15 17:33:14",
      //   },
      //   {
      //     dataName: "2024-5-15_17-8-36",
      //     size: "6G",
      //     time: "2024-05-15 17:20:22",
      //   },
      //   {
      //     dataName: "2024-5-15_17-8-36",
      //     size: "6G",
      //     time: "2024-05-15 17:20:22",
      //   },
      //   {
      //     dataName: "2024-5-15_17-8-36",
      //     size: "6G",
      //     time: "2024-05-15 17:20:22",
      //   },
      //   {
      //     dataName: "2024-5-15_17-8-36",
      //     size: "6G",
      //     time: "2024-05-15 17:20:22",
      //   },
      //   {
      //     dataName: "2024-5-15_17-8-36",
      //     size: "6G",
      //     time: "2024-05-15 17:20:22",
      //   },
      //   {
      //     dataName: "2024-5-15_17-8-36",
      //     size: "6G",
      //     time: "2024-05-15 17:20:22",
      //   },
      //   {
      //     dataName: "2024-5-15_17-8-36",
      //     size: "6G",
      //     time: "2024-05-15 17:20:22",
      //   },
      //   {
      //     dataName: "2024-5-15_17-8-36",
      //     size: "6G",
      //     time: "2024-05-15 17:20:22",
      //   },
      //   {
      //     dataName: "2024-5-15_17-8-36",
      //     size: "6G",
      //     time: "2024-05-15 17:20:22",
      //   },
      //   {
      //     dataName: "2024-5-15_17-8-36",
      //     size: "6G",
      //     time: "2024-05-15 17:20:22",
      //   },
      // ],
      list: [
        {
          dataName: "1",
          size: "1",
          time: "1",
        },
        {
          dataName: "2",
          size: "2",
          time: "2",
        },
        {
          dataName: "3",
          size: "3",
          time: "3",
        },
        {
          dataName: "4",
          size: "4",
          time: "4",
        },
        {
          dataName: "5",
          size: "5",
          time: "5",
        },
        {
          dataName: "6",
          size: "6",
          time: "6",
        },
        {
          dataName: "7",
          size: "7",
          time: "7",
        },
        {
          dataName: "8",
          size: "8",
          time: "8",
        },
        {
          dataName: "9",
          size: "9",
          time: "9",
        },
        {
          dataName: "10",
          size: "10",
          time: "10",
        },
        {
          dataName: "11",
          size: "11",
          time: "11",
        },
        {
          dataName: "12",
          size: "12",
          time: "12",
        },
        {
          dataName: "13",
          size: "13",
          time: "13",
        },
        {
          dataName: "14",
          size: "14",
          time: "14",
        },
        {
          dataName: "15",
          size: "15",
          time: "15",
        },
        {
          dataName: "16",
          size: "16",
          time: "16",
        },
        {
          dataName: "17",
          size: "17",
          time: "17",
        },
        {
          dataName: "18",
          size: "18",
          time: "18",
        },
        {
          dataName: "19",
          size: "19",
          time: "19",
        },
        {
          dataName: "20",
          size: "20",
          time: "20",
        },
      ],
      dialogVisible: false, //建图弹窗是否显示
      activeTab: "0", //当前tab
      activeStep: 0, //当前步骤
      isFullScreen: false, //是否全屏
      //创建地图表单
      form: {
        mapName: "",
        gatherName: "",
        remark: "",
      },
    };
  },
  created() {
    this.changePage(1);
  },
  // mounted() {
  //   this.$nextTick(() => {
  //     this.$refs.tabs.$children[0].$refs.tabs[0].style.display = "none";
  //     console.log(this.$refs.tabs.$children[0].$refs);
  //     console.log(this.$refs.tabs.$children[0].$refs.tabs);
  //   });
  // },
  watch: {
    activeStep(val) {
      this.activeTab = val.toString();
    },
  },
  methods: {
    changePage(num) {
      // console.log(`每个页面显示${this.pageSize}条数据，当前第${num}页`);
      this.tableData = this.list.slice(
        (num - 1) * this.pageSize,
        num * this.pageSize
      );
      this.currentPage = num;
    },
    changePageSize(size) {
      this.pageSize = size;
      console.log(this.pageSize);
      this.changePage(1);
      this.currentPage = 1;
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleClose(done) {
      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     done();
      //   })
      //   .catch((_) => {});
      this.activeStep = 0;
      this.dialogVisible = false;
      this.isFullScreen = false;
      document.getElementById("next").innerHTML = "下一步";
    },
    //进度条上一步
    back() {
      if (this.activeStep > 0) {
        this.activeStep--;
        document.getElementById("next").innerHTML = "下一步";

      }
    },
    //进度条下一步
    next() {
      if (this.activeStep++ > 3) {
        document.getElementById("next").innerHTML = "保存";
      }
      if (this.activeStep === 6) {
        this.dialogVisible = false;
        this.activeStep = 0;
        document.getElementById("next").innerHTML = "下一步";
      }
    },
  },
};
</script>
<style lang="less">
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  background: #494141;
  color: #fff;
}
.el-table {
  background: #494141;
  border: none;
  .el-table__cell.gutter {
    display: none;
  }
  tr:hover > td {
    background: #6d6161 !important;
  }
  th {
    color: #a8a4a4 !important;
  }
  &::before {
    height: 0;
  }
  td {
    button {
      background: #494141;
      width: 60px;
      height: 30px;
      color: blue;
      border: none;
      cursor: pointer;
      margin: 0 10px;
    }
  }
}

.el-dialog {
  background: #494141;
  padding-bottom: 20px;
  .el-input__inner {
    background: #494141;
    width: 300px;
    border: 1px solid #a8a4a4;
    color: #fff;
  }
}
.el-dialog__title {
  color: #fff;
}

.el-step__title.is-process {
  color: #fff;
}
.el-steps--horizontal {
  margin-bottom: 20px;
}

.el-tabs__header {
  display: none;
}

.el-form-item__label {
  color: #a8a4a4;
}
</style>
<style lang="less" scoped>
.data {
  box-sizing: border-box;
  padding: 20px;
  .in {
    padding: 20px;
    background: #494141;
    border-radius: 10px;
  }

  .el-dialog {
    position: relative;
    i {
      position: absolute;
      bottom: 5px;
      right: 5px;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
    .el-card{
      background: #494141;
      color:#a8a4a4;
      text-align: center;
      border: none;
    }
  }
}
</style>
